<template>
  <div>
    <el-row>
      <el-col :span="24">
        <vab-card shadow="always" class="follow-text-card">
          <div style="display: flex; width: 100%">
            <div style="flex: 1">跟进内容</div>
            <div style="flex: 13">
              <el-form ref="logFormRef" :model="logForm">
                <el-form-item prop="content" label="">
                  <el-input
                    v-model="logForm.content"
                    type="textarea"
                    :rows="5"
                  />
                </el-form-item>
                <div class="pay-button-group">
                  <el-button
                    type="primary"
                    @click="submitLogForm('logFormRef')"
                  >
                    保存
                  </el-button>
                </div>
              </el-form>
            </div>
          </div>
          <div style="display: flex; width: 100%">
            <div style="flex: 1">历史记录</div>
            <div
              v-if="logInfo.length !== 0"
              style="flex: 13"
              class="follow-logs-content"
            >
              <el-timeline style="padding: 0">
                <el-timeline-item
                  v-for="(item, index) in logInfo"
                  :key="index"
                  :timestamp="item.created_at"
                >
                  <div class="vab-info-card">
                    <div style="margin-bottom: 10px; font-weight: 600">
                      <span>跟进人：</span>
                      <span>admin</span>
                    </div>
                    <div class="list-item-meta-description">
                      <span>小记内容：</span>
                      <span>{{ item.content }}</span>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>

            <div v-else class="follow-logs-content" style="flex: 13">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </div>
          </div>
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { insertFollow } from '@/api/custom'
  export default defineComponent({
    name: 'DetailDrawer',
    props: {
      followProp: {
        type: Array,
        required: true,
      },
      mid: {
        type: Number,
        required: true,
      },
    },
    emits: ['get-follow'],

    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        logFormRef: null,
        logForm: {},
        logInfo: [],
        mid: 0,
      })
      watchEffect(() => {
        console.log(props.mid)
        state.mid = props.mid
        state.logInfo = props.followProp
      })
      const submitLogForm = (formName) => {
        state[formName].validate(async (valid) => {
          if (valid) {
            console.log(state.logForm)
            state.logForm.custom_id = state.mid
            const { msg } = await insertFollow(state.logForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            state[formName].resetFields()
            emit('get-follow', state.logForm.custom_id)
          }
        })
      }

      return {
        ...toRefs(state),
        submitLogForm,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
  .follow-text-card {
    height: auto;
  }

  .follow-logs-card {
    height: 60vh;
  }
  .follow-logs-content {
    height: 50vh !important;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .vab-info-card {
    position: relative;
    width: 100%;
    padding: $base-padding;
    background: #e2e2e2;
    border-radius: $base-border-radius + 2;

    &::after {
      position: absolute;
      top: 8px;
      left: -10px;
      width: 0;
      height: 0;
      overflow: hidden;
      content: '';
      border-color: #e2e2e2 transparent transparent;
      border-style: solid dashed dashed;
      border-width: 10px;
    }
  }

  .vab-data-empty {
    min-height: 0;
  }
</style>
